import { defineComponent, ref, onMounted } from "vue";

import { NButton } from "naive-ui";

import Counter from "@/components/Counter.vue";
import { useMainStore } from "@/store";
import "@/assets/style/common.scss";

export default defineComponent({
  name: "App",
  setup() {
    const count = ref<number>(0);
    const a = 34;
    const refCounter = ref<any>(null);
    const handleInc = (v: number) => {
      console.log("parent method", v);
      count.value = v;
      // 通过组件实例组件获取组件自己内部通过 defineExpose 暴露的信息
      console.log(refCounter.value.a);
      refCounter.value.someFn();
    };
    onMounted(() => {
      console.log("mounted");
    });

    const mainStore = useMainStore();
    const handleUpdatName = () => {
      mainStore.$patch({
        name: "jerry" + Math.random()
      });
    };
    return () => (
      <>
        <router-view></router-view>
        {/* 注意子组件传递出来的,名字格式  onXxx 的形式*/}
        <Counter ref={refCounter} count={count.value} onInc={handleInc} />
        <p>
          ===
          <NButton onClick={handleUpdatName}>naive-ui Button</NButton>
          ===
        </p>
      </>
    );
  }
});
